<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<view v-if="isLogin" class="body">			 
			<!-- 创建 -->
			<template>
				<view class="goods-wrap m-b2" v-for="(item,index) in params.need" :key="index">
					<view class="hd-title"> 
						<u-icon v-if="index>0" name="trash" :size="42" color="#ff0000" @click="delGoods(index)"></u-icon>
					</view>				
					<u--form :model="params" ref="uForm" class="form-wrap"> 
						<u-form-item label="设备" labelWidth="160" prop="name" borderBottom="true" class="u-form-item" @click="isShowTool=true;params.goodsIndex=index"> 
							<u-input v-model="item.device_name" placeholder="选择设备" disabled disabledColor="#ffffff" border="none" style="pointer-events: none;"/>
							<u-icon	slot="right" name="arrow-right"></u-icon>		 
						</u-form-item>
						<u-form-item label="数量" labelWidth="160" prop="num" borderBottom="true" class="u-form-item">
							<u-input type="number" v-model="item.num" placeholder="输入数量" disabledColor="#ffffff" border="none"/>
							<!-- <u-icon	slot="right" name="arrow-right"></u-icon>						 -->
						</u-form-item>						 				
					</u--form>
				</view>	
				
				<view class="m-t2 m-l2 m-r2 m-b2">
					<u-button  type="primary" :plain="true" :hairline="true" text="增加设备" @click="addGoods"></u-button>
				</view>	
					
				<u--form :model="params" ref="uForm" class="form-wrap">
					<u-form-item label="交货时间" labelWidth="160" prop="categoryname" borderBottom="true" class="u-form-item" @click="isShowDate=true">
						<u-input v-model="params.delivery_time" placeholder="选择交货时间" disabled disabledColor="#ffffff" border="none" style="pointer-events: none;"/>
						<u-icon	slot="right" name="arrow-right"></u-icon>						
					</u-form-item>
					<u-form-item label="备注信息" labelWidth="160" prop="pname" borderBottom="true" class="u-form-item">
						<u--textarea v-model="params.remark" placeholder="输入备注信息" border="none"></u--textarea>
						<!-- <u-input v-model="params.remark" placeholder="输入备注信息" disabledColor="#ffffff" border="none"/>					 -->
					</u-form-item>						 				
				</u--form> 
			</template>
			
			 
		</view> 
		
		<u-calendar mode="single" :show="isShowDate" @confirm="confirmDate" @close="isShowDate=false" :defaultDate="defaultDate" :minDate="minDate"></u-calendar>
		<u-picker :show="isShowTool" :columns="deviceslist" keyName="name" :defaultIndex="[0]" itemHeight="90" :closeOnClickOverlay="true" @cancel="isShowTool=false" @confirm="changepcategory" @close="isShowTool=false"></u-picker> 
		
		<template v-if="type=='edit'">
			<view v-if="!loadingState.default" class="footer">
				<view class="fix-wrap created-btn-wrap">
					<view class="btn submit-btn" @click="submit">保存编辑</view> 
				</view>
			</view>
		</template>
		
		<template v-if="type=='add'">
			<view class="footer">
				<view class="fix-wrap created-btn-wrap">
					<view class="btn submit-btn" @click="submit">提交</view> 
				</view>
			</view>
		</template>
		
	</view>
</template>

<script>
	import {
			checkPhone,dateFormat
		} from '@/common/util.js'
		
	const d = new Date()
	let currrentTimespace=d.getTime(); 
	let timespace_31=currrentTimespace+31*24*60*60*1000;	
	let format_date_31=dateFormat(timespace_31,'YYYY-MM-DD'); 
	export default {
		data() {
			return {
				isIphoneX:getApp().globalData.isIphoneX,
				isLogin: false,
				deviceslist:[[]], 
				id:'',
				type:'add',
				isShowTool:false,
				isShowDate:false,
				params:{ 
					goodsIndex:0,
					needNum:0,
					need:[
						{
							id:'',
							device_id:"",
							device_name:'',
							num:""
						}
					],  
					remark: '', 
					delivery_time:''
				},
				isStop:true,
				loadingState:{
					default:true
				},
				defaultDate:[format_date_31],
				minDate:format_date_31
			}
		},
		async onLoad(params) { 
			this.isLogin=await this.$loginState('check');
			this.id=params.id; 
			this.type=params.type;
			
			if(this.type=='edit'){
				uni.setNavigationBarTitle({
					title:'编辑需求'
				})
			}else{
				uni.setNavigationBarTitle({
					title:'生产需求'
				})
			}
			
			if(this.isLogin){  
				this.deviceslistsel();
				 
				if(this.type=='edit'){
					this.getDetail();
				}
				 
			}
			 
					 
		},
		methods: {
			
			async addGoods(){
				this.params.needNum+=1; 
				let data={
					id:'',
					device_id:"",
					device_name:'',
					num:"" 
				}; 
				this.$set(this.params.need,this.params.needNum,data);  
				
			},
			
			delGoods(idx){
				this.params.needNum-=1;				 
				this.params.need.splice(idx,1);
			},
			
			changepcategory(e){
				let idx=this.params.goodsIndex;
				this.params.need[idx].device_id=e.value[0].id;
				this.params.need[idx].device_name=e.value[0].name; 
				this.isShowTool=false; 
			},
			
			async deviceslistsel(){
				let res=await this.$api.user_api.devdeviceselistsel();  
				if(res.data.code==200){ 
					this.$set(this.deviceslist,0,res.data.data); 				 
				}
			},
			
			confirmDate(e){ 
				this.params.delivery_time=e[0];
				this.isShowDate=false;				
			},
			
			changeDevice(e){
				this.params.device_id=this.deviceslist[e.target.value].id;
				this.params.devices_name=this.deviceslist[e.target.value].name;
			}, 
			
			// 获取项目详情
			async getDetail(){
				let res=await this.$api.user_api.devneedinfo({
					id:this.id
				})  
				if(res.data.code==200){
					this.loadingState.default=false; 					
					this.params.delivery_time=res.data.data.delivery_time;					
					this.params.remark=res.data.data.remark;
					this.params.need=[];
					this.params.needNum=res.data.data.devlist.length-1;
					res.data.data.devlist.forEach(item=>{
						let need_item={
							id:item.id,
							num:item.num,
							device_id:item.device_id,
							device_name:item.device_name
						}
						this.params.need.push(need_item);
					})
				}
			},
			
			 
			
			// 切换期限类型
			changeDate(e){ 
				this.params.delivery_time=e.target.value; 
			},
			 
			
			// 创建项目
			async submit(){
				let _this=this; 
				let {
					need, 
					remark, 
					delivery_time,
				} = this.params;
				let needs=[];
				need.forEach(item=>{
					let need_item={
						id:item.id,
						device_id: item.device_id, 
						num: item.num
					}
					needs.push(need_item)
					if(item.num==''){
						this.$showToast({
							title:'需求数量不能为空',
						})
						return
					}
				})
				 
				if(delivery_time==''){
					this.$showToast({
						title:'请选择交货时间',
					})
					return
				}
				 
				
				if(this.isStop){
					this.isStop=false; 
					
					if(this.type=='add'){ 
						let res = await this.$api.user_api.devneedadd({
							need:JSON.stringify(needs), 
							remark, 
							delivery_time,
						});  
						if (res.data.code == 200) {
							this.$showToast({
								icon:'success',
								title:'添加成功',
								duration:1000,
							}).then(()=>{
								this.$store.commit('XQ_LIST_UPDATE',1);
								uni.navigateBack({
									delta:1
								})
							})
							this.isStop=true; 
						} else {
							this.$showToast({
								icon:'error',
								title:res.data.msg,
							}) 
							this.isStop=true; 
						}
					}
					
					// 编辑
					if(this.type=='edit'){ 
						let res = await this.$api.user_api.devneededit({
							id:this.id,
							need:JSON.stringify(needs),
							remark, 
							delivery_time,
						});  
						if (res.data.code == 200) {
							this.$showToast({
								icon:'success',
								title:'编辑成功',
								duration:1000,
							}).then(()=>{
								this.$store.commit('XQ_LIST_UPDATE',1);
								uni.navigateBack({
									delta:1
								})
							})
							this.isStop=true; 
						} else {
							this.$showToast({
								icon:'error',
								title:res.data.msg,
							}) 
							this.isStop=true; 
						}
					}
					
				}
				
			}
			
			
		}
	}
</script>

<style lang="less" scoped>
	.project-form-wrap{
		padding: 20rpx 0 0; 
		.form-wrap{
			 
		}
	}
	.hd-title{
		display: flex;
		justify-content: flex-end;
		padding: 20rpx;
	}
	
	.created-btn-wrap{
		display: flex;
		.btn{
			height: 80rpx;
			line-height: 80rpx;
			margin: 10rpx 10rpx 0;
			flex-grow: 1;
			border-radius: 8rpx;
			text-align: center;
			font-size: 30rpx;
			color:#fff;
		}
		.next-btn{
			background: #ff9600; 
		}
		.submit-btn{
			background: #0099ff; 
		}
	} 
	.step-bar{
		height: 90rpx;
		margin-bottom: 20rpx;
		.fix-wrap{
			display: flex;
			height: 90rpx;
			background: #fff;
		}
		.item{
			flex-grow: 1;
			width: 25%;
			text-align: center;
			color:#999;
			.text{
				font-size: 28rpx;				
			}
			.icon{
				width: 40rpx;
				height: 40rpx;
				margin:0 auto 0; 
			}
		}
		.active{
			.text,.icon{
				color:#09f;				
			} 
		}
	}
	.form-wrap{
		padding:0 20rpx; 
		.row-2{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
</style>
